<template>
    <section>
        <el-col :span="24">
            <el-form inline>
                <el-form-item>
                    <el-input v-model="form.name" placeholder="目标群体名称" clearable @keyup.enter.native="searchBtn" size="small"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="el-icon-search" @click="searchBtn" size="small" :loading="btnLoading">查询</el-button>
                    <el-button type="warning" class="el-icon-plus" size="small" @click="addBtn" :disabled="!nodeActions.includes('add')">&nbsp;新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="24">
            <el-table :data="data" style="width: 100%" :max-height="tableHeight" v-loading="loading" size="mini">
                <el-table-column prop="number" label="目标群体编码"></el-table-column>
                <el-table-column prop="name" label="目标群体名称"></el-table-column>
                <el-table-column prop="begin_age" label="开始年龄"></el-table-column>
                <el-table-column prop="end_age" label="结束年龄"></el-table-column>
                <el-table-column label="操作" align="center" fixed="right" width="120">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" class="el-icon-edit" @click="editBtn(scope.row)" :disabled="!nodeActions.includes('edit')">&nbsp;编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--翻页栏-->
            <div style="margin-top: 4px;overflow: hidden;float: right;">
                <Page :total="total" :current="page" :page-size="limit" show-total @on-change="pageChange"></Page>
            </div>
        </el-col>

        <!--新增/编辑-->
        <Modal v-model="addVisible" :title="addTitle" width="500px" :loading="true" :mask-closable="false">
            <el-form :model="addForm" :rules="rules" label-width="110px" @submit.native.prevent label-position="left">
                <el-form-item label="目标群体编码" prop="number">
                    <el-input v-model.trim="addForm.number" size="small" placeholder="请输入目标群体编码" clearable></el-input>
                </el-form-item>
                <el-form-item label="目标群体名称" prop="name">
                    <el-input v-model.trim="addForm.name" size="small" placeholder="请输入目标群体名称" clearable></el-input>
                </el-form-item>
                <el-form-item label="目标年龄范围">
                    <el-input v-model.trim="addForm.begin_age" size="small" type="number" style="width: 150px;" placeholder="开始年龄"></el-input>&nbsp;&nbsp;至&nbsp;&nbsp;
                    <el-input v-model.trim="addForm.end_age" size="small" type="number" style="width: 150px;" placeholder="结束年龄"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <i-button type="primary" :loading="btnLoading" @click="submitBtn">提交</i-button>
            </div>
        </Modal>
    </section>
</template>

<script>

import {targetList, targetSave} from "../../../api/bs/info";

export default {
    name: "bs_info_target",
    data() {
        return {
            tableHeight: window.innerHeight - 210,
            selectIndex: 0,
            btnLoading: false,
            loading: false,
            page: 1,
            limit: 20,
            total: 0,
            data: [],
            user: {},
            nodeActions: [],

            form: {name: ""},
            addVisible: false,
            addTitle: "新增【目标群体】",
            addForm: {number: "", name: "", begin_age: "", end_age: ""},
            rules: {
                number: [{ required: true, message: "请输入编码", trigger: "blur" }],
                name: [{ required: true, message: "请输入名称", trigger: "blur" }],
            },
        }
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
    },
    methods: {
        //搜索按钮
        searchBtn() {
            this.page = 1;
            this.getData();
        },
        //翻页
        pageChange(page) {
            this.page = page;
            this.getData();
        },
        //获取数据
        getData() {
            let param = {
                page: this.page,
                limit: this.limit
            };
            param = Object.assign(param, this.form);
            this.loading = true;
            this.btnLoading = true;
            targetList(param).then((res) => {
                this.loading = false;
                this.btnLoading = false;
                this.total = res.data.total;
                this.data = res.data.data;
            }).catch(() => {
                this.btnLoading = false;
                this.loading = false;
            });
        },
        addBtn(){
            this.addTitle = "新增【目标群体】";
            this.addForm = {number: "", name: "", begin_age: "", end_age: ""};
            this.addVisible = true;
        },
        editBtn(row){
            this.addTitle = "编辑【目标群体】";
            this.addForm = Object.assign({}, row);
            this.addVisible = true;
        },
        submitBtn(){
            if(!this.addForm.number || !this.addForm.name){
                this.$message.warning("目标用户编码、目标用户名称不能为空");return;
            }
            this.btnLoading = true;
            targetSave(this.addForm).then((res) =>{
                this.btnLoading = false;
                if(res.code === 0){
                    this.$message.success("保存成功");
                    this.addVisible = false;
                    this.getData();
                }else{
                    this.$message.error(res.msg);
                }
            }).catch(() =>{
                this.btnLoading = false;
            })
        }
    },
    mounted() {
        this.searchBtn();
    }
}
</script>

<style scoped>

</style>
